<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "Box",
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYzI1NzcwNS1jZDQ0LTQzZjMtOTIyZC0xMDgzNWNmODVhYmUiLCJpZCI6ODYxODQsImlhdCI6MTY0NzU2OTU5N30.oNBhNr4HdFDhGrxYbHX0qdxVpFLIhlVtXmsW6oSr9Y4"
      let viewer = new Cesium.Viewer("cesiumContainer")
      var redBox = viewer.entities.add({
        name: "河南郑州市高新区升龙又一场A座上方五千米的蓝色半透明的盒子",
        position: Cesium.Cartesian3.fromDegrees(113.549608, 34.813093, 5000.0),
        box: {
          dimensions: new Cesium.Cartesian3(4000.0, 3000.0, 5000.0),
          material: Cesium.Color.BLUE.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
        }
      })

      viewer.zoomTo(viewer.entities)

      viewer._cesiumWidget._creditContainer.style.display = "none" // 隐藏版权
    }
  }
}
</script>

<style lang='scss' scoped>
html, body, #cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
